<ui:composition template="/templates/default.xhtml"
		xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:o="http://openfaces.org/"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:c="http://java.sun.com/jstl/core">
		
    <ui:define name="title">OpenHDS - Create Vaccination</ui:define>

	<ui:param name="crud" value="#{vaccinationCrud}" />
	
	<ui:define name="listing">
		<ui:include src="list.xhtml" />
	</ui:define>

            <ui:define name="display">         		
       	    <h:outputText value="#{navController.breadcrumbTrail}" />
       		
             <h1>Edit Vaccination</h1>
             <h:messages id="error" globalOnly="true" />
             <h:form id="vaccinationForm">
             	<h:panelGrid columns="4">
                  
                  	  <h:outputText value="Child Id:"/>
                      <h:outputText />
                      <h:inputText tabindex="1" styleClass="individual" autocomplete="off" id="childExtId" value="#{vaccinationCrud.item.child}" converter="#{individualExtIdConverter}" />
                      <h:message for="childExtId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

					  <h:outputText value="#{msg.fieldWorkerId}:"  />
                  	  <h:outputText />
                  	  <h:inputText tabindex="2" styleClass="collectedBy" autocomplete="off" id="collectedBy" value="#{vaccinationCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}" />
                  	  <h:message for="collectedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

					  <h:outputText value="BCG: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="2" id="bcg" value="#{vaccinationCrud.bcg}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="bcg" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                  	
                  	  <h:outputText value="1st Polio: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="3" id="polio1" value="#{vaccinationCrud.polio1}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="polio1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                  	
                  	  <h:outputText value="2nd Polio: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="4" id="polio2" value="#{vaccinationCrud.polio2}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="polio2" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="3rd Polio: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="5" id="polio3" value="#{vaccinationCrud.polio3}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="polio3" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="4th Polio: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="6" id="polio4" value="#{vaccinationCrud.polio4}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="polio4" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="1st DPT: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="7" id="dpt1" value="#{vaccinationCrud.dpt1}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="dpt1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="2nd DPT: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="8" id="dpt2" value="#{vaccinationCrud.dpt2}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="dpt2" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="3rd DPT: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="9" id="dpt3" value="#{vaccinationCrud.dpt3}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="dpt3" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="Measels: (#{siteProperties.dateFormat})" />
                      <h:outputText />
                      <o:dateChooser tabindex="10" id="measels" value="#{vaccinationCrud.measels}" pattern="#{siteProperties.dateFormat}" />
                      <h:message for="measels" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

					  <h:outputText value="Has the child got a BCG scar?"/>
                      <img class="clickable" onclick="O$('popupWindowForYesNo').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
                      <h:inputText tabindex="11" id="bcgScar" value="#{vaccinationCrud.item.bcgScar}" converter="#{defaultConverter}" />
                      <h:message for="bcgScar" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="Has the child been given a drop in the mouth?"/>
                      <img class="clickable" onclick="O$('popupWindowForYesNo').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
                      <h:inputText tabindex="12" id="cildDrop" value="#{vaccinationCrud.item.dropInMouth}" converter="#{defaultConverter}" />
                      <h:message for="childDrop" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                      
                      <h:outputText value="Has the child received an injection on the thigh?"/>
                      <img class="clickable" onclick="O$('popupWindowForYesNo').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
                      <h:inputText tabindex="13" id="cildInjection" value="#{vaccinationCrud.item.injection}" converter="#{defaultConverter}" />
                      <h:message for="childInjection" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

			</h:panelGrid>
            <br />
			<h:commandButton action="#{vaccinationCrud.edit}" value="#{msg.lblSave}">
	        	<f:setPropertyActionListener target="#{jsfService.itemId}" value="#{vaccinationCrud.item.uuid}" />
	        </h:commandButton>
            </h:form>
       </ui:define>
 </ui:composition>